<template>
  <el-container>
    <el-aside class="left-aside" width="20%">
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header>
              <div style="display: flex;justify-content: center;">
                <el-image
                    :src="authorinfo.avatarurl"
                    :fit="'fill'"
                    :preview-teleported="true"
                />

              </div>
            </template>
            <div style="display: flex;justify-content: center;">
              <span>{{authorinfo.nickname}}</span>
            </div>
            <template #footer>
              <div style="display: flex;justify-content: center;">
                <el-button type="success" round @click="visitUserSpace()">访问空间</el-button>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </el-aside>

    <el-main>
      <el-row class="article-content" style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header>
              <div class="article-title">
                <span style="font-size: 25px;">{{article.title}}</span>
              </div>
            </template>
            <div>

              <div class="content">

                <div class="content-info">
                  <span style="display:flex;align-items: center;">
                    <img src="/src/assets/images/Calendar-icon.png" style="width: 16px;height: 16px;">
                    <span>{{article.createtime}}</span>
                  </span>
                  <span style="display:flex;align-items: center;">
                    <img src="/src/assets/images/Like-icon.png" style="width: 16px;height: 16px;">
                    <span>{{article.likenumber}}</span>
                  </span>
                </div>
<!--                <div class="ribbon">-->
<!--                  版权声明-->
<!--                </div>-->
                <div class="content-text">


<!--                  <p>Aimer ce n'est pas se regarder l'un l'autre mais regarder ensemble dans la meme direction.-->
<!--                  </p>-->
<!--                  <p>爱不是相互凝望,而是朝同一个方向看去。</p>-->
<!--                  <p>这句话是法国作家安托万·德·圣-埃克苏佩里的名言。</p>-->
<!--                  <p>这句话是法国作家安托万·德·圣-埃克苏佩里的名言。</p>-->
<!--                  <p>它强调了爱情中的共同目标和愿景的重要性，而不仅仅是彼此沉浸在对方的眼神中。</p>-->
<!--                  <p>真正的爱不仅是两个人互相凝视，而是两个人一起看向未来，共同努力，追求相同的梦想和目标。这样的爱情更有深度和持久性。</p>-->
<!--                  <p><el-image :fit="'fill'" src="https://img1.baidu.com/it/u=1832620790,2486462626&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"/></p>-->

<!--                MdPreview标签用于展示内容  -->
                  <MdPreview :editorId="id" v-model="article.content"/>
<!--                MdCatalog标签展示文本的目录  -->
<!--                  <MdCatalog :editorId="id" :scrollElement="scrollElement" />-->
                </div>
              </div>
            </div>
            <template #footer>

              <div class="card-footer">
                <!--                <span>Footer content</span>-->
                <span>

                </span>
                <span>
<!--                  <el-button-group>-->
                    <el-button type="primary" round @click="likeArticle()" :disabled="lisDisabled"><el-icon><CaretTop /></el-icon>点赞</el-button>
                    <el-button type="warning" round @click="addFavorite()" :disabled="fisDisabled"><el-icon><Star /></el-icon>收藏</el-button>
<!--                  </el-button-group>-->

                </span>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="comment">
        <el-col style="border-bottom: 20px;">
          <el-card>
            <template #header>
              <div class="comment-header" style="font-size: 30px;">
                <span>{{total}}</span>
                <span>评论</span>
              </div>
              <div class="comment-editarea">
                <el-form label-position="top">

                  <el-form-item label="发表评论">
                    <el-input
                        v-model="commenttext"
                        :rows="3"
                        placeholder="在这里写评论..."
                        type="textarea"
                        :maxlength="300"
                    />
                  </el-form-item>
                  <el-form-item>
                    <!--Popover 气泡卡片-->
                    <el-popover placement="bottom" :width="295" trigger="hover">
                      <template #reference>
                        <el-button circle>😀</el-button>
                      </template>
                      <div style="display: flex;justify-content: center;">
                        <EmojiPicker @select="onSelectEmoji"/>
                      </div>
                    </el-popover>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="success" @click="addComment()">提交</el-button>
                  </el-form-item>
                </el-form>

              </div>
            </template>
            <div class="comment-content">
              <div v-if="isEmpty">
                <el-empty description="暂无评论" :image-size="300"/>
              </div>
              <div v-else v-for="(item,index) in commentlist" :key="index">
                <el-space>
                  <el-avatar
                      :src="item.avatarurl"
                  />
                  <span>{{item.nickname}}</span>
                  <span>{{formattedDate(item.createtime)}}</span>
                </el-space>
                <p>{{item.content}}</p>
                <el-divider/>
              </div>
<!--          评论分页-->
              <div style="display: flex;justify-content: center;">
                <el-pagination background layout="prev, pager, next,jumper"
                               v-model:page-size="pageSize"
                               v-model:current-page="pageNum"
                               :total="total"
                               @size-change="onSizeChange"
                               @current-change="onCurrentChange"
                />
              </div>
            </div>
<!--            <template #footer>Footer content</template>-->
          </el-card>
        </el-col>
      </el-row>

    </el-main>

    <el-aside class="right-aside" width="20%">
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <div class="tooltip">
            <span>
              {{article.abstracts}}
            </span>
          </div>
        </el-col>
      </el-row>

<!--      <el-affix :offset="88">-->
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
            <el-card shadow="hover">
              <template #header>
                <span>文章目录</span>
              </template>
              <MdCatalog :editorId="id" :scrollElement="scrollElement" />
            </el-card>
        </el-col>
      </el-row>
<!--    </el-affix>-->
    </el-aside>


  </el-container>

</template>

<script setup>
import {useRouter,useRoute} from 'vue-router'
import {ref} from "vue"
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css'

//引入请求函数接口
import {articleDetailService, articleListService,articleLikeService} from '/src/api/Article.js'
import {otherInfoService} from '/src/api/User.js'
import {commentListService,commentAddService} from "../../api/Comment.js";
import {favoriteAddService} from '/src/api/Favorite.js'


import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'
import {ElMessage} from "element-plus";


//评论内容
const commenttext = ref('')
// const contenttext = ref('# Title'+'\n'+'> Aimer ce n\'est pas se regarder l\'un l\'autre mais regarder ensemble dans la meme direction.\n' +
//     '\n' +
//     '>爱不是相互凝望,而是朝同一个方向看去\n' +
//     '\n' +
//     '>这句话是法国作家安托万·德·圣-埃克苏佩里的名言\n' +
//     '这句话是法国作家安托万·德·圣-埃克苏佩里的名言\n' +
//     '它强调了爱情中的共同目标和愿景的重要性，而不仅仅是彼此沉浸在对方的眼神中\n' +
//     '\n' +
//     '![tp](https://img1.baidu.com/it/u=1832620790,2486462626&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800)' )

const id = 'preview-only'
const scrollElement = document.documentElement

//const showEmojiPicker = ref(false)

const router = useRouter()
const route = useRoute()

//文章数据
const article = ref({})
//评论列表
const commentlist = ref([])

const articleid = ref()

//作者用户信息
const authorinfo = ref({})

//分页条数据模型
const pageNum = ref(1)     //当前页
const total = ref(0)       //总条数
const pageSize = ref(5)    //每页条数

//判断评论列表是否为空
const isEmpty = ref(true)

// 设置禁用状态
const fisDisabled = ref(false)
const lisDisabled = ref(false)

//日期格式转换(2024-07-24 19:12:39 ==> 2024-07-24)
function formatDate(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

//日期时间转换(2024-07-30 19:42:28 ==> 30/07/2024, 19:42:28)
function formattedDate(dateString) {
  const date = new Date(dateString);
  const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
  return date.toLocaleDateString('en-GB', options);
}

//获取文章
const getArticle = async () => {
  let id = route.params.id
  console.log("获取的文章id:"+id)
  let result = await articleDetailService(id)
  // ElMessage.success()
  article.value = result.data
  article.value.createtime = formatDate(article.value.createtime)
  articleid.value = article.value.id
  //获取作者信息
  getAuthor(result.data.userid)
  //获取评论
  getCommentList()
}
getArticle()

//获取文章作者信息
const getAuthor = async (userid) => {

    let result = await otherInfoService(userid)
    authorinfo.value = result.data

}
// getAuthor()

//获取文章的评论
const getCommentList = async () => {

  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    id: articleid.value
  }
  let result = await commentListService(params);
  commentlist.value = result.data.items;
  total.value = result.data.total;
  if(total.value > 0)isEmpty.value = false;//如果没有评论,设为false
}

// 发表评论
const addComment = async () => {
  //评论内容不为空
  if(commenttext.value.trim() !== ''){
    let result = await commentAddService(articleid.value,commenttext.value)
    ElMessage.success('发表成功!')
  }

  //发表成功后清除评论内容
  commenttext.value = ''
  //添加评论后更新评论
  getCommentList()

}

//添加收藏
const addFavorite = async () => {

  //按钮设置为禁用
  fisDisabled.value = true

  let id = articleid.value
  let result = await favoriteAddService(id)

  //
  ElMessage.success('收藏成功!')
}

//点赞
const likeArticle = async () => {

  //按钮设置为禁用
  lisDisabled.value = true

  let id = articleid.value
  let result = await articleLikeService(id)

  //
  ElMessage.success('点赞成功!')
  article.value.likenumber ++
  
}

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  getCommentList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  getCommentList()
}


//选择表情添加到文本域
const onSelectEmoji = (emoji) => {

  commenttext.value += emoji.i
  // console.log(emoji)
  /*
    // result
    {
        i: "😚",
        n: ["kissing face"],
        r: "1f61a", // with skin tone
        t: "neutral", // skin tone
        u: "1f61a" // without tone
    }
    */
}

//访问用户空间
const visitUserSpace = () => {
  let userid = authorinfo.value.id

  router.push({name:'space',params:{id:userid}})
  
}


// 点击按钮显示表情框
// const togglePicker = () => {
//
//   showEmojiPicker.value = !showEmojiPicker.value
//
// }


</script>

<style scoped>
.article-title{
  display: flex;
  align-content: center;
  justify-content:center;
}
.info{
  display: flex;
  align-items: center;
}
.content-info{
  display: flex;
  justify-content: space-between;
  /*justify-content: center;*/
  align-items: center;
}
.card-footer{
  display: flex;
  align-content: center;
  justify-content: space-between;
}


/* HTML: <div class="tooltip">This is a Speech Bubble with a solid coloration and with border radius </div> */
.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */
  /*--c: #cf9d38;*/
  --c:#EB6841;

  padding: 1em;
  border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2);
  clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
  0 max(0%  ,var(--p) - var(--b)/2),
  calc(-1*var(--h)) var(--p),
  0 min(100%,var(--p) + var(--b)/2));
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    calc(var(--p) - var(--b)/2) var(--r) calc(100% - var(--p) - var(--b)/2) 0/
    0 0 0 var(--h);
}


</style>